<template>
  <div class="hello">
    <div class="select">
      <span @click="hadoff(index)" v-for="(item,index) in arr" :key="index">{{item}}</span>
    </div>

    <div class="lists" v-for="(item,index) in arr1" :key="index">
      <div class="imgBox">
        <img src="https://tupian.qqw21.com/article/UploadPic/2019-5/20195621585861346.jpeg" alt="">
      </div>
      <div class="textBox">
        <div>{{item.name}}</div>
        <div>{{item.text}}</div>
        <div class="bottom">
            <div>￥{{item.price}}</div>
            <div :class="{active:item.status == false}" @click="changClick(item)" class="btn">{{item.buttons}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arrs: [
        { name: "汉堡王|北美新沃池餐厅", text: "买1送1明星黄堡|用心或烤肉质紧实 鲜肉多汁 抱抱团", price: 25, buttons: "马上抢", status: "true" },
        { name: "华莱士", text: "华莱士 | 聚划算单人套餐 | 进店必选", price: 12.12, buttons: "马上抢", status: true },
        { name: "贡天下山西特产", text: "白老大小米果仁酥220g【抱抱团】", price: 25, buttons: "马上抢", status: true }
      ],
      arr: ['正在抢购', '上新预告'],
      arr1: [
        {name:"汉堡王|北美新沃池餐厅",text:"买1送1明星黄堡|用心或烤肉质紧实 鲜肉多汁 抱抱团" ,price:25,buttons:"马上抢" ,status:"true"},
        { name: "华莱士", text: "华莱士 | 聚划算单人套餐 | 进店必选", price: 12.12, buttons: "马上抢", status: true },
        { name: "贡天下山西特产", text: "白老大小米果仁酥220g【抱抱团】", price: 25, buttons: "马上抢", status: true }
      ],
      arr2: [
        { name: "牛肉拉面", text: "贼好吃", price: 8, buttons: "马上抢", status: true },
        { name: "水饺", text: "好吃不过饺子", price: 12.12, buttons: "马上抢", status: true },
        { name: "小龙包子", text: "绝对美味", price: 7, buttons: "马上抢", status: "true" }
      ]
    }
     
  },
  methods: {
    hadoff(index) {
      num:0
      if (index == 0) {
        this.arr1 = this.arrs;
        console.log(this.arr1);
      } else if(index == 1) {
        this.arr1 = this.arr2;
        console.log(this.arr1);
      }
    },
    changClick(item) {
      if (item.status) {
        item.buttons = "已抢过"
        item.status = false;
        console.log(item.status);
      } 
  }
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.hello{
  padding-top: 80%;
}
.lists{
  display: flex;
}
.imgBox{
  margin-right: 4px;
}
.imgBox img{
  width: 80px;
}
.bottom .btn{
  padding: 3px;
  background-color: red;
  color: rgb(175, 172, 172);
  border-radius: 5px;
}
.bottom{
  display: flex;
  justify-content: space-between;
}
.textBox{
  width: 70%;
}
 .bottom .btn.active{
  background-color: #f5f5f5;
  color: black;
}
</style>
